<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>

<!-- <script type="text/javascript">
			//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").show(1000);
				}, function(){
					$(".content").hide(1000);
				});
			})
			*/
			
			//只改变高度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").slideDown(500);
				}, function(){
					$(".content").slideUp(500);
				});
			})
			*/
			
			//只改变透明度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").fadeIn(1000);
				}, function(){
					$(".content").fadeOut(1000);
				});
			})
			*/
			
			//toggle() 可以切换元素的可见状态. 
			//slideToggle(): 通过高度变化来切换匹配元素的可见性
			//fadeToggle(): 通过透明度来切换元素的可见性.
			//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). 
			$(function(){ 
				$(".content").show();
				var i = 1; 
				
				$(".head").click(function(){
					//$(".content").toggle();
					//$(".content").slideToggle();
					//$(".content").fadeToggle();
					
					$(".content").fadeTo("slow", i);
					i = i - 0.1;
				});
			})
		</script> -->
<script type="text/javascript">
	//show 函数 显示隐藏的元素  添加参数以指定的时长展开元素
	//hide 函数  隐藏显示的元素  
	$(function() {
		/* $(".head").toggle(
			function() {
				$(".content").show(1000);
			},
			function() {
				$(".content").hide(1000);
			}
		); */
		//slideDown  通过高度变化来动态地显示所有匹配的元素  隐藏的元素也可以     
		//通过该方法进行显示 添加参数表示动态变化的时长
		//slideUp 通过高度变化来动态地隐藏所有匹配的元素 
		/* $(".head").toggle(
			function() {
				$(".content").slideDown(1000);
			},
			function() {
				$(".content").slideUp(1000);
			}
		); */
		/* $(".head").toggle(
			function() {
				$(".content").fadeIn(1000);
			},
			function() {
				$(".content").fadeOut(1000);
			}
		);*/

		//通过高度变化来切换所有匹配元素的可见性
		var i = 1;
		$(".content").show();
		$(".head").click(
			function() {
				//当toggle 不带任何参数是时 使指定的元素进行显示/隐藏切换
				//$(".content").toggle();
				//$(".content").slideToggle();
				//$(".content").fadeToggle();
				$(".content").fadeTo("slow", i);
				i = i - 0.1;
			});
	});
</script>
</head>
<body>
	<div id="panel">
		<h5 class="head">什么是jQuery?</h5>
		<div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由
			John Resig
			创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
		</div>
	</div>
</body>

</html>
